<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<th:block th:include="include :: wxheader('产品中心')"></th:block>
		<!--<meta charset="utf-8" />
		<title>产品中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/index.css" />-->
	</head>

	<body>
		<div class="bg">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">产品中心</h1>
				<a th:href="@{/wx/index}" class="mui-icon mui-icon-home mui-pull-right"></a>
			</header>

			<div style="top: 30px;overflow: scroll;height: 90%;" class="mui-scroll-wrapper">
				<div id="pullrefresh" class="mui-scroll" style="height: 100%;">
					<div style="height: auto;">
						<div class="mui-content">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media"
									th:if="${productList}!=null"
									th:each="product : ${productList}"
								>
									<a href="javascript:void(0);" th:value="${product.descn}" onclick="detailBy(this)">
										<img class="mui-media-object mui-pull-left"
											 th:src="${product.imgUrl}" src="img/banner.jpg">
										<div class="mui-media-body">
											[[${product.productName}]]
											<p class='mui-ellipsis'
											   th:utext="${product.productSpecs}">36.0</p>
											<span class="mui-badge mui-badge-success" th:text="${'￥'+product.productPrice}">22</span>
										</div>
										<div id="div"></div>
									</a>
								</li>
							</ul>
						</div>
				    </div>
			    </div>
			</div>



			<!--<div class="mui-bar mui-bar-tab">-->
				<!--<ul>-->
					<!--<li>广州天码防伪科技有限公司</li>-->
					<!--<li>官网：http://www.tianma315.com/</li>-->
				<!--</ul>-->
			<!--</div>-->

		</div>

		<div id="popover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div id="des"></div>
		</div>
		<!--<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script>
			mui.init()
		</script>-->
		<th:block th:include="include :: wxfooter" />
		<script type="text/javascript" th:src="@{/js/remControl.js}" src="js/remControl.js"></script>

	<script type="text/javascript">
		mui.init();
		mui('.mui-scroll-wrapper').scroll({
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: true, //是否显示滚动条
			deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		});
		function detailBy(obj){
			var value = obj.getAttribute('value');
			$('#des').html(value);
			mui('#popover').popover('toggle',obj);
		}
	</script>
	</body>

</html>